import Head from "next/head";

import { ExtendedRecordMap } from "notion-types";
import { useEffect } from "react";
import { NotionRenderer } from "react-notion-x";

export const NotionPage = ({
  recordMap,
  rootPageId,
}: {
  recordMap: ExtendedRecordMap;
  rootPageId?: string;
}) => {
  if (!recordMap) {
    return null;
  }

  useEffect(() => {
    const pdf = document.createElement("a");
    pdf.setAttribute("href", "https://nataly.space/Natalia_Manatkina_CV.pdf");
    pdf.setAttribute("target", "_blank");
    pdf.setAttribute(
      "style",
      "padding-left: 5px; transform: translateY(5px); display: inline-block"
    );
    pdf.innerHTML = '<img src="/pdf.svg" width="20" height="20" />';
    document.querySelector(".title").append(pdf);
  }, []);

  return (
    <>
      <Head>
        <title>Наталья, UX/UI дизайнер</title>
        <meta
          name="viewport"
          content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
        />
        <meta charSet="utf-8" />
        <meta
          name="description"
          content="Резюме и портфолио Натальи, UX/UI дизайнер"
        />
        <link
          rel="shortcut icon"
          type="image/x-icon"
          href=""
        />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="true"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Unbounded:wght@200..900&display=swap"
          rel="stylesheet"
        />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="true"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Play:wght@400;700&family=Unbounded:wght@200..900&display=swap"
          rel="stylesheet"
        />

        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@NotionHQ" />
        <meta name="twitter:site" content="@NotionHQ" />
        <meta
          name="twitter:description"
          content="Резюме и портфолио Натальи, UX/UI дизайнер"
        />
        <meta name="twitter:url" content="https://www.nataly.space/" />
        <meta
          name="twitter:image"
          content="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F42412933-6e94-4927-9a45-21d2aeef7357%2Fc20368ef-fef2-4825-be28-4038ae0752dc%2Fphoto_2024-03-09_11.00_1.png?table=block&id=072af006-b96c-456e-8c32-e72d22489735&cache=v2"
        />
        <meta property="og:site_name" content="Notion" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://www.nataly.space/" />
        <meta property="og:title" content="Наталья, UX/UI дизайнер" />
        <meta
          property="og:description"
          content="Резюме и портфолио Натальи, UX/UI дизайнер"
        />
        <meta
          property="og:image"
          content="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F42412933-6e94-4927-9a45-21d2aeef7357%2Fc20368ef-fef2-4825-be28-4038ae0752dc%2Fphoto_2024-03-09_11.00_1.png?table=block&id=072af006-b96c-456e-8c32-e72d22489735&cache=v2"
        />
        <meta property="og:locale" content="ru_RU" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
      </Head>

      <NotionRenderer
        recordMap={recordMap}
        fullPage={true}
        darkMode={false}
        rootPageId={rootPageId}
      />
    </>
  );
};
